<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>游戏交友</title>
    <script>
        document.documentElement.style.fontSize =
            document.documentElement.clientWidth / 7.5 + "px";

        window.onresize = function () {
            document.documentElement.style.fontSize =
                document.documentElement.clientWidth / 7.5 + "px";
        }
    </script>
    <link rel="stylesheet" href="__CSS__/public.min.css">
    <style>
        * {
            outline: none;
        }

        #app {
            background-color: rgb(242, 242, 242);
        }

        .ptit1 {
            width: 100%;
            height: 0.88rem;
            border-bottom: 0.001rem #eee solid;
            text-align: center;
            line-height: 0.88rem;
            font-size: 0.36rem;
            position: relative;
            background-color: #f8f8f8
        }

        .container_n1 {
            width: 7.5rem;
            line-height: 0.9rem;
            height: 0.9rem;
            border-bottom: 0.001rem solid #DEDEE4;
            background: #FFF;

        }

        .container_n1_n1_box {
            width: 6.9rem;
            height: 0.88rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container_n1_n1 {
            color: rgba(0, 0, 0, 1);
            font-size: 0.28rem;
        }

        .container_n1_n2 {
            width: 4.6rem;
            height: 0.45rem;
            margin-left: 0.3rem;
            border: none;
        }

        .personalityLabel_box {
            width: 4.6rem;
            height: 0.88rem;
            margin-left: 0.3rem;
            display: flex;
            justify-content: flex-start;
            /* align-items: center; */

        }

        .personalityLabel_n1_n1_box {
            width: 6.9rem;
            height: 0.88rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .personalityLabel {
            width: 1.8rem !important;
            height: 0.4rem;
            margin-right: 0.2rem;
            border: none;
        }

        .container_n1_two {
            margin-top: 0.2rem;
        }

        .el-input__inner {
            height: 0.6rem !important;
            line-height: 0.6rem !important;
        }

        /* 视频介绍 */
        .video_n1 {
            width: 7.5rem;
            height: 3.28rem;
            background: #FFF;
        }

        .video_n1_n1_box {
            width: 6.9rem;
            height: 3.28rem;
            margin: 0 auto;
        }

        .video_n1_n1 {
            color: rgba(0, 0, 0, 1);
            font-size: 0.28rem;
            padding-top: 0.22rem;
        }

        .addVideo_box {
            width: 1.48rem;
            height: 1.48rem;
            border: 0.01rem dashed #DEDEE4;
            margin: 0.16rem 0 0 1.47rem;
            position: relative;
        }

        .addVideo {
            display: inline-block;
            width: 1.48rem;
            height: 1.48rem;
            line-height: 0.8rem;
        }

        .addVideo {
            display: inline-block;
            width: 1.48rem;
            height: 1.48rem;
            text-align: center;
            line-height: 0.8rem;
        }

        .add {
            width: 0.32rem;
            height: 0.32rem;
        }

        .addName {
            font-size: 0.2rem;
        }

        .prompt {
            width: 100%;
            height: 0.5rem;
            background-color: rgb(255, 240, 221);
            margin-top: 0.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .prompt img {
            width: 0.24rem;
            height: 0.24rem;
            margin-right: 0.1rem;
        }

        .prompt_title {
            font-size: 0.2rem;
            color: rgb(255, 159, 22);
        }

        .add_img {
            display: inline-block;
            width: 1.48rem;
            height: 1.48rem;
            line-height: 0.8rem;
            position: absolute;
            margin-left: 2rem;
            top: 50%;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            z-index: 0;
        }

        /* 发布 */
        .release {
            width: 7.5rem;
            height: 1rem;
            background-color: rgb(234, 61, 101);
            font-size: 0.3rem;
            text-align: center;
            line-height: 1rem;
            color: #FFF;
            position: fixed;
            bottom: 0;
            z-index: 9;
        }

        .position {
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            padding: 0 15px;
            height: 0.6rem !important;
            line-height: 0.6rem !important;
            margin-top: .15rem;
            font-size: .22rem;
        }
    </style>
</head>
<body>
<div class="container" id="app" v-loading="loading">
    <div class="ptit1">发布信息</div>
    <div class="container_n1">
        <div class="container_n1_n1_box">
            <div class="container_n1_n1">
                <label>我的昵称</label>
            </div>
            <input v-model="girl_name" class="container_n1_n2" type="text" placeholder="您的昵称">
        </div>

    </div>
    <div class="container_n1">
        <div class="container_n1_n1_box">
            <div class="container_n1_n1">
                <label>自我简介</label>
            </div>
            <input v-model="girl_des" class="container_n1_n2" type="text" placeholder="简单扼要的介绍下自己">
        </div>

    </div>
    <div class="container_n1">
        <div class="personalityLabel_n1_n1_box">
            <div class="container_n1_n1">
                <label>个性标签</label>
            </div>
            <div class="personalityLabel_box">

                <select class="personalityLabel position" v-model="tag1" name="province">
                    <option value="">请选择</option>
                    <option v-for="item in tag1Map" :key="item.tag_id" :label="item.tag_name" :value="item.tag_id">{{item.tag_name}}</option>
                </select>
                <select v-if="tag1" class="personalityLabel position" v-model="tag2" name="province">
                    <option value="">请选择</option>
                    <option v-for="item in tag2Map" :key="item.tag_id" :label="item.tag_name" :value="item.tag_id">{{item.tag_name}}</option>
                </select>
            </div>
        </div>

    </div>
    <div class="container_n1">
        <div class="container_n1_n1_box">
            <div class="container_n1_n1">
                <label>我的位置</label>
            </div>
            <div class="personalityLabel_box" id="distpicker">
                <select class="personalityLabel position" name="province" v-model="province" data-province="选择省" lay-ignore lay-verify="required"></select>
                <select class="personalityLabel position" name="city" v-model="city" data-city="选择市" lay-ignore></select>
            </div>
        </div>
    </div>
    <div class="video_n1">
        <div class="video_n1_n1_box">
            <div class="video_n1_n1">
                <label>视频介绍</label>
            </div>
            <div class="addVideo_box">
                <div class="addVideo" @click="fileUpload">
                    <img class="add" src="/public/static/img/h5/pw/add.png" alt="">
                    <div class="addName">添加视频</div>
                </div>
                <div class="add_img" v-if="girl_img" @click="fileUpload">
                    <img :src="girl_img" height="100%">
                </div>
                <input type="file" ref="file" @change="fileChange" accept="video/mp4,audio/mp4" style="display:none;"/>
            </div>
            <div class="prompt">
                <img src="/public/static/img/h5/pw/caveat.png" alt="">
                <div class="prompt_title">请勿上传裸露低俗的视频，严重者将做封号处理</div>
            </div>
        </div>
    </div>
    <div class="container_n1_two">
        <div class="container_n1">
            <div class="container_n1_n1_box">
                <div class="container_n1_n1">
                    <label>微信号码</label>
                </div>
                <input v-model="girl_wx" class="container_n1_n2" type="text" placeholder="我的微信号码">
            </div>
        </div>
        <div class="container_n1">
            <div class="container_n1_n1_box">
                <div class="container_n1_n1">
                    <label>微信口令</label>
                </div>
                <input v-model="girl_pwd" class="container_n1_n2" type="text" placeholder="交友验证口令">
            </div>
        </div>
    </div>
    <div class="release" v-on:click="submitGirl">发布</div>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/common.js?v={$Think.config.commonJs}"></script>
<script src="__JS__/es6-promise.auto.min.js"></script>
<script src="__JS__/vue.min.js"></script>
<script src="__JS__/axios.min.js"></script>
<script src="__JS__/vod-js-sdk-v6.js"></script>
<script src="__JS__/distpicker.min.js"></script>
<script>
    app_test();

    if (!Cookies.get('user_token')) {
        window.android._login();
    }

    var app = new Vue({
        el: '#app',

        data() {
            return {
                uploadInfo: [], //视频信息
                picked: '10z',  //
                classId: 598888, //类别id
                girl_img: "",       //封面图
                provinceMap: [],//省集合
                cityMap: [],    //市集合
                tag1Map: [],    //标签1集合
                tag2Map: [],    //标签2集合
                tag1: '',        //标签1
                tag2: '',        //标签2
                province: "",    //省
                city: "",        //市
                girl_name: "",   //我的昵称
                girl_des: "",    //描述
                girl_wx: "",     //微信号
                girl_pwd: "",    //微信口令
                girl_vod: "",       //视频id
                loading: true
            }
        },
        created: function () {
            axios.post('/pw_girl_status', {}).then(function (response) {
                if (response.data.code == 200) {
                    if (response.data.data != -1) {

                        window.open("/pw_girl_info", "_blank");
                    }
                }
            });
            var self = this;
            axios.post('/pw_girl_tag', {}).then(function (response) {
                if (response.data.code == 200) {
                    self.tag1Map = response.data.data;
                }
            });
            this.loading = false;
        },
        mounted: function () {
            $("#distpicker").distpicker();
        },
        watch: {
            'tag1': function (index) {
                self = this;
                if (this.tag1) {
                    axios.post('/pw_girl_tag2', {
                        tag1: this.tag1
                    }).then(function (response) {
                        if (response.data.code == 200) {
                            self.tag2Map = response.data.data;
                            self.tag2 = "";
                        }
                    });
                }
            },
            'province': function (index) {
                this.city = "";
            }
        },
        methods: {
            //点击图片上传文件
            fileUpload: function () {
                this.$refs.file.click()

            },
            //发布陪玩信息
            submitGirl: function () {
                self = this;
                axios.post('/pw_submit_girl', {
                    girl_name: this.girl_name,
                    girl_des: this.girl_des,
                    tag1: this.tag1,
                    tag2: this.tag2,
                    province: this.province,
                    city: this.city,
                    girl_img: this.girl_img,
                    girl_wx: this.girl_wx,
                    girl_pwd: this.girl_pwd,
                    girl_vod: this.girl_vod

                }).then(function (response) {
                    if (response.data.code == 500) {
                        alert(response.data.msg);
                    } else {
                        window.open("/pw_girl_info", "_blank");
                    }
                });
            },
            //上传文件
            fileChange: function () {
                var self = this;
                self.loading = true;

                self.tcVod = new TcVod.default({
                    getSignature: function () {
                        var params = new URLSearchParams();
                        params.append("procedure", self.picked);
                        params.append("classId", self.classId);
                        return axios.post('/getSignature', params).then(function (response) {
                            return response.data.sign;
                        });
                    }
                });
                var uploader = self.tcVod.upload({
                    videoFile: self.$refs.file.files[0]
                });
                var info = {
                    videoInfo: uploader.videoInfo,
                    isVideoUploadSuccess: false,
                    isVideoUploadCancel: false,
                    progress: 0,
                    fileId: '',
                    videoUrl: '',
                    cancel: function () {
                        info.isVideoUploadCancel = true;
                        uploader.cancel()
                    }
                };
                self.uploadInfo.push(info);
                uploader.on('video_progress', function (res) {

                    info.progress = res.percent;
                });

                uploader.on('video_upload', function (res) {
                    info.isVideoUploadSuccess = true;
                });
                uploader.done().then(function (res) {

                    //定时器获取打包好的封面
                    var poll = setInterval(function () {
                        axios.post('/pw_video', {
                            fileId: res.fileId
                        }).then(function (response) {
                            if (response.data.basicInfo.coverUrl) {
                                self.girl_vod = res.fileId;
                                self.loading = false;

                                //清除定时器
                                self.girl_img = response.data.basicInfo.coverUrl;
                                clearInterval(poll);
                            }
                        });
                    }, 3500);
                })
            }
        }
    })
</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?bf36a1bc063e6437a30fb80573711ea5";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>